<template>
    <div class="card-box" ref="cardContentRef">
      <div
        class="card-item"
        :class="{ 'card-flex1': data.length == 1 || size === 'small' }"
        v-for="(item, i) in data"
        :key="i"
      >
        <!-- 指标信息 -->
        <div class="card-item-left">
          <span>{{ item.name }}</span>
          <div>{{ addThousandsSeparator(item.data && item.data[0] && item.data[0].displayName) || '0' }}</div>
        </div>
      </div>
    </div>
</template>
  
  
<script>

  import { ref, watch, onMounted, onBeforeUnmount, nextTick, computed, defineComponent } from 'vue';
  import { isUndefined, isNull } from '@src/util/type'

  export default defineComponent({
    props: {
      // 表格原始数据
      data: {
        type: Array,
        default: () => [],
      },
      // 自定义图表的配置
      dataConfig: {
        type: Object,
        default: () => ({}),
      },
      // 变动时重新渲染表格
      redraw: {
        type: Number,
        default: () => 0,
      },
      // 是否是大屏内
      isDataScreen: {
        type: Boolean,
        default: false,
      },
      // 工作台中的尺寸
      size: {
        type: String,
        default: 'large',
      },
    },
    setup(props, { emit }) {
      const cardContentRef = ref(null);
  
      // 添加千分位
      const addThousandsSeparator = number => {
        
        if (isUndefined(number)) {
          return '';
        }
        
        if (isNull(number)) {
          return '';
        }
        
        // 将数字转换为字符串
        number = number.toString();
  
        // 使用正则表达式在数字中添加千分号
        return number.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      };
      return {
        cardContentRef,
        addThousandsSeparator,
      };
    },
  });
  </script>
  
  <style lang="scss" scoped>
  .card-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
  
    .card-item {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 32px 0;
  
      .card-item-hr {
        width: 0px;
        height: 32px;
        margin: 0 16px;
        border-right: 1px solid #ebedf0;
      }
  
      &-left {
        display: flex;
        align-items: center;
  
        span {
          color: #3d3d3d;
          font-size: 16px;
        }
        div {
          margin-left: 16px;
          color: #262626;
          font-size: 32px;
          font-family: DINBold-Bold;
          font-weight: 500;
        }
      }
    }
  
    ::v-deep .card-flex1 {
      width: 100%;
  
      .card-item-right {
        width: auto !important;
      }
    }
  }
  </style>